﻿<MRow>
    <MCol Cols="12" Sm="6" OffsetSm="3">
        <MCard>
            <MToolbar Color="teal" Dark>
                <MAppBarNavIcon></MAppBarNavIcon>

                <MToolbarTitle>Manage</MToolbarTitle>

                <MSpacer></MSpacer>

                <MButton Icon>
                    <MIcon>mdi-dots-vertical</MIcon>
                </MButton>
            </MToolbar>

            <MList>
                @foreach (var item in _items)
                {
                    if (!string.IsNullOrWhiteSpace(item.Action))
                    {
                        <MListItem>
                            <MListItemAction>
                                <MIcon>@item.Action</MIcon>
                            </MListItemAction>

                            <MListItemContent>
                                <MListItemTitle>@item.Title</MListItemTitle>
                            </MListItemContent>
                        </MListItem>
                    }
                    else if (item.Divider)
                    {
                        <MDivider></MDivider>
                    }
                    else if (!string.IsNullOrWhiteSpace(item.Header))
                    {
                        <MSubheader>@item.Header</MSubheader>
                    }
                }
            </MList>
        </MCard>
    </MCol>
</MRow>

@code
{
    private class DataDemo
    {
        public string Action { get; set; }
        public string Title { get; set; }
        public bool Divider { get; set; }
        public string Header { get; set; }
    }

    private List<DataDemo> _items = new List<DataDemo>()
    {
        new DataDemo { Action = "mdi-inbox-arrow-down", Title = "Inbox" },
        new DataDemo { Action = "mdi-send", Title = "Sent" },
        new DataDemo { Action = "mdi-delete", Title = "Trash" },
        new DataDemo { Action = "mdi-alert-octagon", Title = "Spam" },
        new DataDemo { Divider = true },
        new DataDemo { Header = "Labels" },
        new DataDemo { Action = "mdi-label", Title = "Family" },
        new DataDemo { Action = "mdi-label", Title = "Friends" },
        new DataDemo { Action = "mdi-label", Title = "Work" }
    };
}